<template>
    <view class="message-tip d-r a-center j-center">
        <text class="text">{{message.text}}</text>
    </view>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs } from 'vue';

const MessageTip =  defineComponent({
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
  },
  setup(props:any, ctx:any) {
    const data = reactive({
      message: {},
    });

    watchEffect(()=>{
      data.message = props.data;
    });

    return {
      ...toRefs(data),
    };
  }
});
export default MessageTip
</script>
<style lang="scss" scoped>
.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}


.message-tip {
    width:750rpx;
    margin-top:8px;
    .text{
        color: #999999;
	    font-size: 13px;
    }
}
</style>
